@charset "UTF-8";

@import "~/scss/helpers/_color.scss";

$hd: 1px;
$global-font-size: 14px;
$max-width: 750px;
$min-width: 300px;

/* 
  主色
*/
$primary-1: #fff1e6;
$primary-2: #ffcba8;
$primary-3: #ffae80;
$primary-4: #ff8f57;
$primary-5: #ff6d2e;
$primary-6: #f54305;
$primary-7: #cf3000;
$primary-8: #a82200;
$primary-9: #821600;
$primary-10: #5c0c00;

// 全局/品牌色
$brand-primary: #232c4d;
$brand-primary-tap: #0e80d2;
$brand-success: #6abf47;
$brand-warning: #c7b77f;
$brand-error: #f4333c;
$brand-important: #ff5b05; // 用于小红点
$brand-wait: #108ee9;

// 文字色
// 基本
$color-text-base: #000;
// 基本 - 反色
$color-text-base-inverse: #fff;
// 辅助色
$color-text-secondary: #a4a9b0;
// 文本框提示
$color-text-placeholder: #bbb;
// 失效
$color-text-disabled: #bbb;
// 辅助描述
$color-text-caption: #888;
// 段落
$color-text-paragraph: #333;
// 链接
$color-link: $brand-primary;

$color-text-hover: $brand-primary;

$color-text-active: $brand-primary;

// 背景色
// 组件默认背景
$fill-base: #fff;
// 页面背景
$fill-body: #f5f5f9;
// 组件默认背景 - 按下
$fill-tap: #ddd;
// 通用失效背景
$fill-disabled: #ddd;
// 遮罩背景
$fill-mask: rgba(0, 0, 0, 0.4);
// 许多小图标的背景，比如一些小圆点，加减号
$color-icon-base: #ccc;

$fill-grey: #f7f7f7;

// 透明度
$opacity-disabled: 0.3; // switch checkbox radio 等组件禁用的透明度

// 边框色
$border-color-base: #ddd;

$border-radius-base: 10px;

$font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
  STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;

// 字体尺寸
// ---

$font-size-base: $global-font-size;
// 字体图标
$font-size-icontext: $global-font-size - 4px;
// 标题
$font-size-heading: $global-font-size + 6px;
// 副标题
$font-size-subhead: $global-font-size + 2px;
// 辅助描述
$font-size-caption: $global-font-size - 4px;
// 次要辅助描述
$font-size-caption-sm: $global-font-size - 4px;

$font-size-mini: 12px; // 12px

$font-size-small: 12px; // 12px
// 基础字体大小
$font-size-base: 14px; // 14px

$font-size-large: 16px; // 16px

// 圆角
// ---
$radius-xs: 2;
$radius-sm: 4;
$radius-md: 8;
$radius-lg: 20;
$radius-circle: 50%;

// 边框尺寸
// ---
$border-width-sm: 1px;
$border-width-md: 1px;
$border-width-lg: 2 * $hd;

// 间距
// ---
// 水平间距
$h-spacing-small: 5 * $hd;
$h-spacing-base: 20px;
$h-spacing-large: 15 * $hd;

// 垂直间距
$v-spacing-xs: 3 * $hd;
$v-spacing-small: 6 * $hd;
$v-spacing-base: 20px;
$v-spacing-large: 15 * $hd;
$v-spacing-xl: 21 * $hd;

// 高度
// 行高
$line-height-base: 1.15; // 单行行高

$line-height-paragraph: 1.5; // 多行行高

// 图标尺寸
// ---
$icon-size-xxs: 15 * $hd;
$icon-size-xs: 18 * $hd;
$icon-size-sm: 21 * $hd;
$icon-size-md: 22 * $hd; // 导航条上的图标、grid的图标大小
$icon-size-lg: 36 * $hd;

// 动画缓动
// ---
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

/************************************
  下面为各个组件各自的样式类

    1. 很多组件的样式都是继承与上面的基础主题
    2. 样式类都是以组件名称开头
      $btn--height
************************************/

$base-color--black: #000;
$base-color--white: #fff;
$base-color--red: #ee0a24;
$base-color--blue: #1989fa;
$base-color--orange: #ff976a;
$base-color--orange-dark: #ed6a0c;
$base-color--orange-light: #fffbe8;
$base-color--green: #07c160;
$base-color--gray: #c8c9cc;
$base-color--gray-light: #e5e5e5;
$base-color--gray-darker: #7d7e80;
$base-color--gray-dark: #969799;

$base-font-size: 14px;
$base-font-size--small: 14px;

/************************************
  整个页面有关的样式类  
  主要为
    - 页面背景色
    - 页面字体默认color
    - 页面字体默认size
    - 页面 Header 中定义的一些样式
    - 页面 sider 中定义的样式
************************************/

// 页面的内边距
$page-padding: $v-spacing-base $h-spacing-base;

// 页面底部留下的一个空白的距离，主要是为了不让页面的内容紧紧地贴在底部，而是留下一点空白距离
$page--padding-bottom: 40px;

// 页面组件的外边距
$component-margin-v: $v-spacing-base;

// 整个页面的底色
$page--background: $base-color--gray;
// 组件的底色--突出组件与页面的色差
$component--background: $base-color--white;
// 弹出框的底色
$popover--background: $base-color--white;

$layout-header--height: 92px;
// 页面左右内边距大小
$base-page--padding-horizontal: 30rpx;
// 页面上下内边距大小
$base-page--padding-vertical: 30px;
// 基础边框样式
$base--border: 1px solid #e7e7f0;

$base--border-color: #e7e7f0;

// 字体的样式
// 默认字体颜色
$base--text-color: rgba(0, 0, 0, 0.65);
// 次要字体颜色
$base--text-color-secondary: rgba(0, 0, 0, 0.45);
// 反色字体颜色
$base--text-color-inverse: $base-color--white;
// 提示类字体的样式
$base--text-color-tips: rgba(0, 0, 0, 0.3);

/**
  icon
*/
$icon--color: inherit;
// 字体图标反色颜色
$icon--color-inverse: rgba($base-color--white, 0.45);

// 提示类字体的大小
$base--text-font-size: 28px;

$base--text-font-size--tips: 28px;

//
// link 的默认颜色
$base--a-color: $primary-6;
